import React, { useState } from 'react';
import { Card, Steps, Menu, Form, InputNumber, Button, List, Input, Popconfirm, message, Row, Col } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Step } = Steps;

const menuItems = [
  '选课课程',
  '选课时间',
  '互斥设置',
  '连选设置',
  '禁选组合',
  '选课权限',
  '限选人数',
];

export default function Settings() {
  const navigate = useNavigate();
  const [currentMenu, setCurrentMenu] = useState('选课课程');
  const [min, setMin] = useState(0);
  const [max, setMax] = useState(0);
  const [groupMin, setGroupMin] = useState(0);
  const [groupMax, setGroupMax] = useState(0);
  const [groups, setGroups] = useState([
    { name: '物理', courses: [] },
    { name: '化学', courses: [] },
  ]);
  const [newGroup, setNewGroup] = useState('');
  const [newCourse, setNewCourse] = useState({});

  // 添加分组
  const handleAddGroup = () => {
    if (!newGroup.trim()) return message.warning('请输入分组名');
    setGroups([...groups, { name: newGroup.trim(), courses: [] }]);
    setNewGroup('');
  };

  // 删除分组
  const handleDeleteGroup = idx => {
    setGroups(groups.filter((_, i) => i !== idx));
  };

  // 添加课程
  const handleAddCourse = idx => {
    if (!newCourse[idx] || !newCourse[idx].trim()) return message.warning('请输入课程名');
    const updated = [...groups];
    updated[idx].courses.push(newCourse[idx].trim());
    setGroups(updated);
    setNewCourse({ ...newCourse, [idx]: '' });
  };

  // 删除课程
  const handleDeleteCourse = (gIdx, cIdx) => {
    const updated = [...groups];
    updated[gIdx].courses.splice(cIdx, 1);
    setGroups(updated);
  };

  // 全部删除课程
  const handleDeleteAllCourses = gIdx => {
    const updated = [...groups];
    updated[gIdx].courses = [];
    setGroups(updated);
  };

  // 保存
  const handleSave = () => {
    message.success('保存成功！');
  };

  return (
    <div style={{ padding: 16, background: '#f5f6fa', minHeight: '100vh' }}>
      <Card style={{ borderRadius: 12, boxShadow: '0 2px 8px #f0f1f2' }}>
        <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 16 }}>选课设置 &gt; 创建选课</div>
        <Steps current={2} style={{ marginBottom: 32 }}>
          <Step title="基本信息" />
          <Step title="选课学生" />
          <Step title="选课设置" />
        </Steps>
        <Row gutter={24}>
          <Col flex="180px">
            <Menu
              mode="inline"
              selectedKeys={[currentMenu]}
              style={{ borderRadius: 8, background: '#f7f9fa', minHeight: 400 }}
              onClick={e => {
                setCurrentMenu(e.key);
                if (e.key === '选课课程') {
                  navigate('/xk/settings');
                } else if (e.key === '选课时间') {
                  navigate('/xk/time');
                }
              }}
            >
              {menuItems.map(item => (
                <Menu.Item key={item}>{item}</Menu.Item>
              ))}
            </Menu>
          </Col>
          <Col flex="auto">
            <div style={{ background: '#f7f9fa', borderRadius: 8, padding: 24, minHeight: 400 }}>
              {currentMenu === '选课课程' && (
                <>
                  <div style={{ marginBottom: 16 }}>
                    本次选课最少<InputNumber min={0} value={min} onChange={setMin} style={{ width: 60, margin: '0 8px' }} />门，
                    最多选择<InputNumber min={0} value={max} onChange={setMax} style={{ width: 60, margin: '0 8px' }} />门。
                  </div>
                  <div style={{ marginBottom: 16 }}>
                    本组应选：最少<InputNumber min={0} value={groupMin} onChange={setGroupMin} style={{ width: 60, margin: '0 8px' }} />，
                    最多<InputNumber min={0} value={groupMax} onChange={setGroupMax} style={{ width: 60, margin: '0 8px' }} />门。
                  </div>
                  <div style={{ background: '#fff', borderRadius: 8, padding: 16, marginBottom: 16 }}>
                    <List
                      dataSource={groups}
                      renderItem={(group, gIdx) => (
                        <List.Item
                          style={{ alignItems: 'flex-start' }}
                          actions={[
                            <Popconfirm title="确认全部删除？" onConfirm={() => handleDeleteAllCourses(gIdx)} okText="确定" cancelText="取消">
                              <a style={{ color: '#1677ff' }}>全部删除</a>
                            </Popconfirm>,
                            <Popconfirm title="确认删除分组？" onConfirm={() => handleDeleteGroup(gIdx)} okText="确定" cancelText="取消">
                              <a style={{ color: '#1677ff' }}><DeleteOutlined /> 删除</a>
                            </Popconfirm>
                          ]}
                        >
                          <div style={{ width: 120, fontWeight: 500 }}>{group.name}</div>
                          <div style={{ flex: 1 }}>
                            <List
                              dataSource={group.courses}
                              renderItem={(course, cIdx) => (
                                <List.Item style={{ padding: 0, border: 'none' }}>
                                  <span>{course}</span>
                                  <a style={{ color: '#1677ff', marginLeft: 16 }} onClick={() => handleDeleteCourse(gIdx, cIdx)}><DeleteOutlined /> 删除</a>
                                </List.Item>
                              )}
                            />
                            <div style={{ display: 'flex', alignItems: 'center', marginTop: 8 }}>
                              <Input
                                placeholder="请输入课程名"
                                value={newCourse[gIdx] || ''}
                                onChange={e => setNewCourse({ ...newCourse, [gIdx]: e.target.value })}
                                style={{ width: 180, marginRight: 8 }}
                              />
                              <Button icon={<PlusOutlined />} type="link" onClick={() => handleAddCourse(gIdx)}>添加课程</Button>
                            </div>
                          </div>
                        </List.Item>
                      )}
                    />
                    <div style={{ marginTop: 16 }}>
                      <Input
                        placeholder="请输入分组名"
                        value={newGroup}
                        onChange={e => setNewGroup(e.target.value)}
                        style={{ width: 180, marginRight: 8 }}
                      />
                      <Button icon={<PlusOutlined />} type="link" onClick={handleAddGroup}>添加分组</Button>
                    </div>
                  </div>
                  <Button type="primary" onClick={handleSave}>保存</Button>
                </>
              )}
              {/* 其他菜单项可根据需要扩展 */}
            </div>
          </Col>
        </Row>
      </Card>
    </div>
  );
}
